<template>
	<tn-popup v-model="show" width="100%" closeBtn :borderRadius="20" safeAreaInsetBottom open-direction="bottom">
		<view class="modify">
			<view class="modify__title">
				<text>设置您的昵称和头像</text>
			</view>
			<view class="modify__text">
				<text>获取微信头像，昵称，主要向用户提供具有辨识度的用户界面</text>
			</view>
			<view class="modify__icon icon_img">
				<image :src="inform.avatar" mode="aspectFill"></image>
				<button class="modify__icon__button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
			</view>
			<view class="modify__name">
				<tn-input style="width: 100%" :border="false" placeholder="请输入昵称" maxLength="10"
					v-model="inform.nickname" type="nickname" inputAlign="center" />
			</view>
			<view class="modify__save">
				<tn-button width="100%" height="90rpx" @click.stop="save" bg-color="#0E2D6D"
					text-color="#fff">保存</tn-button>
			</view>
		</view>
	</tn-popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const show = ref(false);
	const inform = ref({
		avatar: '',
		nickname: '',
	});
	const emits = defineEmits(['change']);
	const onChooseAvatar = async (e : any) => {
		const res = await uniCloud.uploadFile({
			cloudPath: Date.now() + '.png',
			filePath: e.detail.avatarUrl,
		});
		console.log('res',res);
		inform.value.avatar = res.fileID;
	};
	const save = () => {
		show.value = false;
		emits('change', inform.value);
	};
	const open = (val : any) => {
		inform.value = val;
		show.value = true;
	};
	defineExpose({ open });
</script>

<style lang="scss">
	.modify {
		text-align: center;
		padding: 0 40rpx;
		width: 100%;

		&__title {
			font-size: 32rpx;
			padding-top: 50rpx;
			color: #fff;
		}

		&__name {
			background-color: #f9f9f9;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			justify-content: center;

			input {
				width: 100%;
			}
		}

		&__save {
			padding-top: 50rpx;
			padding-bottom: 50rpx;
		}

		&__text {
			color: #0e2d6d;
			font-size: 28rpx;
			padding-top: 20rpx;
		}

		&__icon {
			border: 5px solid #3467c2;
			border-radius: 50%;
			width: 150rpx;
			height: 150rpx;
			margin: 50rpx auto;
			position: relative;

			>image {
				border-radius: 50%;
			}

			&__button {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0;
				z-index: 99;
			}
		}
	}
</style>